/* eslint-disable import/no-anonymous-default-export */
/* eslint-disable jsx-a11y/anchor-is-valid */
import "./style.scss";
import { useEffect } from "react";
import {getJobList} from '../../api/joblist'
import {
  ArrowLeftOutlined, EnvironmentOutlined, ClockCircleOutlined, ReadOutlined, StarOutlined, DownOutlined, CloseOutlined, SearchOutlined, CloseCircleFilled
} from '@ant-design/icons';
import { Input } from 'antd';


// <CloseCircleFilled />

export default () => {
  useEffect(() => {
    // 搜索框交互
    const searchInput = document.querySelector(".search-input");
    const clearBtn = document.querySelector(".clear-btn");

    searchInput.addEventListener("input", function () {
      if (this.value.length > 0) {
        clearBtn.classList.remove("hidden");
      } else {
        clearBtn.classList.add("hidden");
      }
    });

    clearBtn.addEventListener("click", function () {
      searchInput.value = "";
      this.classList.add("hidden");
    });

    // 筛选弹窗交互
    const filterBtns = document.querySelectorAll(".filter-btn");
    const filterModal = document.getElementById("filterModal");
    const closeFilterBtn = document.querySelector(".close-filter");
    const filterContents = document.querySelectorAll(".filter-content");
    const filterTitle = document.querySelector(".filter-title");
    const confirmFilterBtn = document.querySelector(".confirm-filter");
    const resetFilterBtn = document.querySelector(".reset-filter");
    const selectedFiltersContainer =
      document.querySelector(".selected-filters");

    filterBtns.forEach((btn) => {
      btn.addEventListener("click", function () {
        const filterType = this.dataset.filter;
        filterTitle.textContent = this.textContent.trim().replace(/[▼▲]/, "");

        filterContents.forEach((content) => {
          content.classList.add("hidden");
        });

        document
          .getElementById(filterType + "Filter")
          .classList.remove("hidden");
        filterModal.classList.remove("hidden");
        document.body.style.overflow = "hidden";
      });
    });

    closeFilterBtn.addEventListener("click", function () {
      filterModal.classList.add("hidden");
      document.body.style.overflow = "";
    });

    // 城市选择
    const cityOptions = document.querySelectorAll(".city-option");
    cityOptions.forEach((option) => {
      option.addEventListener("click", function () {
        cityOptions.forEach((opt) =>
          opt.classList.remove("bg-blue-50", "text-primary")
        );
        this.classList.add("bg-blue-50", "text-primary");
      });
    });

    // 薪资范围滑块
    const salaryMinRange = document.querySelector(".salary-min-range");
    const salaryMaxRange = document.querySelector(".salary-max-range");
    const salaryMinValue = document.querySelector(".salary-min-value");
    const salaryMaxValue = document.querySelector(".salary-max-value");

    salaryMinRange.addEventListener("input", function () {
      salaryMinValue.textContent = this.value + "k";
      if (parseInt(this.value) > parseInt(salaryMaxRange.value)) {
        salaryMaxRange.value = this.value;
        salaryMaxValue.textContent = this.value + "k";
      }
    });

    salaryMaxRange.addEventListener("input", function () {
      salaryMaxValue.textContent = this.value + "k";
      if (parseInt(this.value) < parseInt(salaryMinRange.value)) {
        salaryMinRange.value = this.value;
        salaryMinValue.textContent = this.value + "k";
      }
    });

    // 单选按钮交互
    const radioOptions = document.querySelectorAll(
      ".experience-option, .education-option"
    );
    radioOptions.forEach((option) => {
      option.onclick=function(){
        const radioGroup = this.classList[0].split("-")[0];
        const radioBtn = this.querySelector(".custom-radio");

        document
          .querySelectorAll("." + radioGroup + "-option .custom-radio")
          .forEach((radio) => {
            radio.classList.remove("checked");
          });

        radioBtn.classList.add("checked");
      }
    });

    // 复选框交互
    const checkboxOptions = document.querySelectorAll(
      ".jobType-option, .industry-option"
    );
    checkboxOptions.forEach((option) => {
      option.onclick = function(){
        const checkbox = this.querySelector(".custom-checkbox");
        checkbox.classList.toggle("checked");
      }
    });

    // 确认筛选
    confirmFilterBtn.addEventListener("click", function () {
      // 这里应该根据选中的筛选条件更新已选筛选条件标签
      // 简单模拟
      selectedFiltersContainer.classList.remove("hidden");
      filterModal.classList.add("hidden");
      document.body.style.overflow = "";
    });

    // 重置筛选
    resetFilterBtn.addEventListener("click", function () {
      // 重置所有筛选选项
      document
        .querySelectorAll(".custom-radio, .custom-checkbox")
        .forEach((el) => {
          el.classList.remove("checked");
        });

      cityOptions.forEach((opt) =>
        opt.classList.remove("bg-blue-50", "text-primary")
      );

      salaryMinRange.value = 15;
      salaryMaxRange.value = 30;
      salaryMinValue.textContent = "15k";
      salaryMaxValue.textContent = "30k";
    });

    // 删除已选筛选条件
    const filterTags = document.querySelectorAll(".selected-filter-tag");
    filterTags.forEach((tag) => {
      tag.onclick = function(){
        this.remove();
        if (document.querySelectorAll(".selected-filter-tag").length === 0) {
          selectedFiltersContainer.classList.add("hidden");
        }
      }
    });

    // 模拟点击申请按钮效果
    const applyButtons = document.querySelectorAll(".job-card button");
    applyButtons.forEach((btn) => {
      btn.addEventListener("click", function () {
        const originalText = this.textContent;
        this.textContent = "申请中...";
        this.disabled = true;

        setTimeout(() => {
          this.textContent = "已申请";
          this.classList.remove("bg-primary");
          this.classList.add("bg-green-500");

          setTimeout(() => {
            this.textContent = originalText;
            this.classList.add("bg-primary");
            this.classList.remove("bg-green-500");
            this.disabled = false;
          }, 2000);
        }, 1000);
      });
    });
  }, []);

  useEffect(()=>{
    ;(async()=>{
      // let res = await getJobList()
      // console.log('职位列表: ', res)
    })();
  }, []);

  return (
    <div className="min-h-screen job-list-page">
      <header className="fixed top-0 left-0 right-0 bg-white shadow-sm z-50">
        <div className="flex items-center h-14 px-4">
          {/* <a
            href="#"
            className="w-10 h-10 flex items-center justify-center text-gray-700"
          >
            <i className="ri-arrow-left-line ri-lg"></i>
          </a> */}
          <ArrowLeftOutlined />
          <h1 className="text-lg font-medium flex-1 text-center mr-10">
            推荐职位
          </h1>
        </div>
      </header>

      <div className="fixed top-14 left-0 right-0 bg-white shadow-sm z-40">
        <div className="px-4 py-3">
          <div className="relative">
            <div className="absolute inset-y-0 left-3 flex items-center pointer-events-none">
              <SearchOutlined style={{ color: 'rgba(0,0,0,.25)' }} />
            </div>
            {/* <Input
              placeholder="搜索职位名称、公司等"
              prefix={<SearchOutlined style={{ color: 'rgba(0,0,0,.25)' }} />}
            /> */}
            <input
              type="search"
              className="search-input w-full h-10 pl-10 pr-10 bg-gray-50 border-none rounded text-sm"
              placeholder="搜索职位名称、公司等"
            />
            <button className="absolute inset-y-0 right-3 flex items-center text-gray-400 clear-btn hidden">
              {/* <div className="w-5 h-5 flex items-center justify-center">
                <i className="ri-close-circle-line"></i>
              </div> */}
              <CloseCircleFilled />
            </button>
          </div>
        </div>

        <div className="px-4 pb-2 overflow-x-auto whitespace-nowrap scrollbar-hide">
          <div className="inline-flex gap-3">
            <button
              className="filter-btn px-3 py-1.5 bg-gray-50 rounded-full text-sm font-medium flex items-center !rounded-button whitespace-nowrap"
              data-filter="city"
            >
              城市
              <DownOutlined />
            </button>
            <button
              className="filter-btn px-3 py-1.5 bg-gray-50 rounded-full text-sm font-medium flex items-center !rounded-button whitespace-nowrap"
              data-filter="salary"
            >
              薪资范围
              <DownOutlined />
            </button>
            <button
              className="filter-btn px-3 py-1.5 bg-gray-50 rounded-full text-sm font-medium flex items-center !rounded-button whitespace-nowrap"
              data-filter="experience"
            >
              工作经验
              <DownOutlined />
            </button>
            <button
              className="filter-btn px-3 py-1.5 bg-gray-50 rounded-full text-sm font-medium flex items-center !rounded-button whitespace-nowrap"
              data-filter="education"
            >
              学历要求
              <DownOutlined />
            </button>
            <button
              className="filter-btn px-3 py-1.5 bg-gray-50 rounded-full text-sm font-medium flex items-center !rounded-button whitespace-nowrap"
              data-filter="jobType"
            >
              工作类型
              <DownOutlined />
            </button>
            <button
              className="filter-btn px-3 py-1.5 bg-gray-50 rounded-full text-sm font-medium flex items-center !rounded-button whitespace-nowrap"
              data-filter="industry"
            >
              行业
              <DownOutlined />
            </button>
          </div>
        </div>

        <div className="selected-filters px-4 pb-3 flex gap-2 flex-wrap hidden">
          <div className="selected-filter-tag bg-blue-50 text-primary rounded-full px-3 py-1 text-xs flex items-center">
            上海
            <CloseOutlined />
          </div>
          <div className="selected-filter-tag bg-blue-50 text-primary rounded-full px-3 py-1 text-xs flex items-center">
            15k-30k
            <CloseOutlined />
          </div>
          <div className="selected-filter-tag bg-blue-50 text-primary rounded-full px-3 py-1 text-xs flex items-center">
            3-5年
            <CloseOutlined />
          </div>
        </div>
      </div>

      <div
        id="filterModal"
        className="fixed inset-0 bg-black bg-opacity-50 z-50 hidden"
      >
        <div className="absolute bottom-0 left-0 right-0 bg-white rounded-t-xl max-h-[70vh] overflow-y-auto">
          <div className="p-4">
            <div className="flex justify-between items-center mb-4">
              <h3 className="text-lg font-medium filter-title">城市</h3>
              <button className="close-filter w-8 h-8 flex items-center justify-center text-gray-500">
                {/* <i className="ri-close-line ri-lg"></i> */}
                <CloseOutlined />
              </button>
            </div>

            <div id="cityFilter" className="filter-content">
              <div className="grid grid-cols-3 gap-3">
                <div className="city-option flex items-center justify-center bg-gray-50 rounded p-2 cursor-pointer">
                  <span className="text-sm">北京</span>
                </div>
                <div className="city-option flex items-center justify-center bg-gray-50 rounded p-2 cursor-pointer">
                  <span className="text-sm">上海</span>
                </div>
                <div className="city-option flex items-center justify-center bg-gray-50 rounded p-2 cursor-pointer">
                  <span className="text-sm">广州</span>
                </div>
                <div className="city-option flex items-center justify-center bg-gray-50 rounded p-2 cursor-pointer">
                  <span className="text-sm">深圳</span>
                </div>
                <div className="city-option flex items-center justify-center bg-gray-50 rounded p-2 cursor-pointer">
                  <span className="text-sm">杭州</span>
                </div>
                <div className="city-option flex items-center justify-center bg-gray-50 rounded p-2 cursor-pointer">
                  <span className="text-sm">成都</span>
                </div>
                <div className="city-option flex items-center justify-center bg-gray-50 rounded p-2 cursor-pointer">
                  <span className="text-sm">武汉</span>
                </div>
                <div className="city-option flex items-center justify-center bg-gray-50 rounded p-2 cursor-pointer">
                  <span className="text-sm">南京</span>
                </div>
                <div className="city-option flex items-center justify-center bg-gray-50 rounded p-2 cursor-pointer">
                  <span className="text-sm">西安</span>
                </div>
              </div>
            </div>

            <div id="salaryFilter" className="filter-content hidden">
              <div className="mb-6">
                <div className="flex justify-between mb-2">
                  <span className="text-sm text-gray-500">最低薪资</span>
                  <span className="text-sm font-medium salary-min-value">
                    15k
                  </span>
                </div>
                <input
                  type="range"
                  min="0"
                  max="50"
                  defaultValue="15"
                  className="salary-min-range"
                  step="1"
                />
              </div>
              <div className="mb-6">
                <div className="flex justify-between mb-2">
                  <span className="text-sm text-gray-500">最高薪资</span>
                  <span className="text-sm font-medium salary-max-value">
                    30k
                  </span>
                </div>
                <input
                  type="range"
                  min="0"
                  max="100"
                  defaultValue="30"
                  className="salary-max-range"
                  step="1"
                />
              </div>
              <div className="grid grid-cols-3 gap-3 mb-4">
                <div className="salary-option flex items-center justify-center bg-gray-50 rounded p-2 cursor-pointer">
                  <span className="text-sm">不限</span>
                </div>
                <div className="salary-option flex items-center justify-center bg-gray-50 rounded p-2 cursor-pointer">
                  <span className="text-sm">10k以下</span>
                </div>
                <div className="salary-option flex items-center justify-center bg-gray-50 rounded p-2 cursor-pointer">
                  <span className="text-sm">10k-15k</span>
                </div>
                <div className="salary-option flex items-center justify-center bg-gray-50 rounded p-2 cursor-pointer">
                  <span className="text-sm">15k-20k</span>
                </div>
                <div className="salary-option flex items-center justify-center bg-gray-50 rounded p-2 cursor-pointer">
                  <span className="text-sm">20k-30k</span>
                </div>
                <div className="salary-option flex items-center justify-center bg-gray-50 rounded p-2 cursor-pointer">
                  <span className="text-sm">30k以上</span>
                </div>
              </div>
            </div>

            <div id="experienceFilter" className="filter-content hidden">
              <div className="flex flex-col gap-3">
                <div className="experience-option flex items-center p-2 cursor-pointer">
                  <div className="custom-radio mr-3" data-value="不限"></div>
                  <span className="text-sm">不限</span>
                </div>
                <div className="experience-option flex items-center p-2 cursor-pointer">
                  <div className="custom-radio mr-3" data-value="应届生"></div>
                  <span className="text-sm">应届生</span>
                </div>
                <div className="experience-option flex items-center p-2 cursor-pointer">
                  <div className="custom-radio mr-3" data-value="1年以下"></div>
                  <span className="text-sm">1年以下</span>
                </div>
                <div className="experience-option flex items-center p-2 cursor-pointer">
                  <div className="custom-radio mr-3" data-value="1-3年"></div>
                  <span className="text-sm">1-3年</span>
                </div>
                <div className="experience-option flex items-center p-2 cursor-pointer">
                  <div className="custom-radio mr-3" data-value="3-5年"></div>
                  <span className="text-sm">3-5年</span>
                </div>
                <div className="experience-option flex items-center p-2 cursor-pointer">
                  <div className="custom-radio mr-3" data-value="5-10年"></div>
                  <span className="text-sm">5-10年</span>
                </div>
                <div className="experience-option flex items-center p-2 cursor-pointer">
                  <div
                    className="custom-radio mr-3"
                    data-value="10年以上"
                  ></div>
                  <span className="text-sm">10年以上</span>
                </div>
              </div>
            </div>

            <div id="educationFilter" className="filter-content hidden">
              <div className="flex flex-col gap-3">
                <div className="education-option flex items-center p-2 cursor-pointer">
                  <div className="custom-radio mr-3" data-value="不限"></div>
                  <span className="text-sm">不限</span>
                </div>
                <div className="education-option flex items-center p-2 cursor-pointer">
                  <div className="custom-radio mr-3" data-value="高中"></div>
                  <span className="text-sm">高中</span>
                </div>
                <div className="education-option flex items-center p-2 cursor-pointer">
                  <div className="custom-radio mr-3" data-value="大专"></div>
                  <span className="text-sm">大专</span>
                </div>
                <div className="education-option flex items-center p-2 cursor-pointer">
                  <div className="custom-radio mr-3" data-value="本科"></div>
                  <span className="text-sm">本科</span>
                </div>
                <div className="education-option flex items-center p-2 cursor-pointer">
                  <div className="custom-radio mr-3" data-value="硕士"></div>
                  <span className="text-sm">硕士</span>
                </div>
                <div className="education-option flex items-center p-2 cursor-pointer">
                  <div className="custom-radio mr-3" data-value="博士"></div>
                  <span className="text-sm">博士</span>
                </div>
              </div>
            </div>

            <div id="jobTypeFilter" className="filter-content hidden">
              <div className="flex flex-col gap-3">
                <div className="jobType-option flex items-center p-2 cursor-pointer">
                  <div className="custom-checkbox mr-3" data-value="全职"></div>
                  <span className="text-sm">全职</span>
                </div>
                <div className="jobType-option flex items-center p-2 cursor-pointer">
                  <div className="custom-checkbox mr-3" data-value="兼职"></div>
                  <span className="text-sm">兼职</span>
                </div>
                <div className="jobType-option flex items-center p-2 cursor-pointer">
                  <div className="custom-checkbox mr-3" data-value="实习"></div>
                  <span className="text-sm">实习</span>
                </div>
                <div className="jobType-option flex items-center p-2 cursor-pointer">
                  <div className="custom-checkbox mr-3" data-value="校招"></div>
                  <span className="text-sm">校招</span>
                </div>
                <div className="jobType-option flex items-center p-2 cursor-pointer">
                  <div className="custom-checkbox mr-3" data-value="远程"></div>
                  <span className="text-sm">远程</span>
                </div>
              </div>
            </div>

            <div id="industryFilter" className="filter-content hidden">
              <div className="flex flex-col gap-3">
                <div className="industry-option flex items-center p-2 cursor-pointer">
                  <div
                    className="custom-checkbox mr-3"
                    data-value="互联网"
                  ></div>
                  <span className="text-sm">互联网</span>
                </div>
                <div className="industry-option flex items-center p-2 cursor-pointer">
                  <div className="custom-checkbox mr-3" data-value="金融"></div>
                  <span className="text-sm">金融</span>
                </div>
                <div className="industry-option flex items-center p-2 cursor-pointer">
                  <div className="custom-checkbox mr-3" data-value="教育"></div>
                  <span className="text-sm">教育</span>
                </div>
                <div className="industry-option flex items-center p-2 cursor-pointer">
                  <div
                    className="custom-checkbox mr-3"
                    data-value="医疗健康"
                  ></div>
                  <span className="text-sm">医疗健康</span>
                </div>
                <div className="industry-option flex items-center p-2 cursor-pointer">
                  <div className="custom-checkbox mr-3" data-value="电商"></div>
                  <span className="text-sm">电商</span>
                </div>
                <div className="industry-option flex items-center p-2 cursor-pointer">
                  <div
                    className="custom-checkbox mr-3"
                    data-value="人工智能"
                  ></div>
                  <span className="text-sm">人工智能</span>
                </div>
                <div className="industry-option flex items-center p-2 cursor-pointer">
                  <div className="custom-checkbox mr-3" data-value="游戏"></div>
                  <span className="text-sm">游戏</span>
                </div>
              </div>
            </div>

            <div className="flex gap-3 mt-6">
              <button className="reset-filter flex-1 py-2.5 border border-gray-300 rounded-lg text-gray-700 font-medium !rounded-button whitespace-nowrap">
                重置
              </button>
              <button className="confirm-filter flex-1 py-2.5 bg-primary text-white rounded-lg font-medium !rounded-button whitespace-nowrap">
                确定
              </button>
            </div>
          </div>
        </div>
      </div>

      <div className="pt-[155px] pb-6 px-4">
        <div className="job-list space-y-4">
          <div className="job-card bg-white rounded-lg shadow-sm p-4">
            <div className="flex justify-between items-start mb-3">
              <h3 className="text-lg font-medium text-gray-900">
                高级前端工程师
              </h3>
              <div className="text-primary font-medium">25k-35k</div>
            </div>
            <div className="flex items-center mb-3">
              <div className="w-10 h-10 bg-gray-100 rounded flex items-center justify-center mr-2">
                <div className="text-gray-500 font-['Pacifico']">logo</div>
              </div>
              <div>
                <div className="text-gray-800">字节跳动</div>
                <div className="text-xs text-gray-500">
                  互联网 | 1000-9999人
                </div>
              </div>
            </div>
            <div className="flex items-center text-sm text-gray-600 mb-3 gap-3">
              <div className="flex items-center">
                {/* <div className="w-4 h-4 flex items-center justify-center mr-1 text-gray-400">
                  <i className="ri-map-pin-line"></i>
                </div> */}
                <EnvironmentOutlined />
                <span>上海</span>
              </div>
              <div className="flex items-center">
                {/* <div className="w-4 h-4 flex items-center justify-center mr-1 text-gray-400">
                  <i className="ri-time-line"></i>
                </div> */}
                <ClockCircleOutlined />
                <span>3-5年</span>
              </div>
              <div className="flex items-center">
                {/* <div className="w-4 h-4 flex items-center justify-center mr-1 text-gray-400">
                  <i className="ri-book-open-line"></i>
                </div> */}
                <ReadOutlined />
                <span>本科</span>
              </div>
            </div>
            <div className="flex justify-between items-center">
              <div className="flex items-center">
                {/* <div className="w-4 h-4 flex items-center justify-center mr-1 text-primary">
                  <i className="ri-star-fill"></i>
                </div> */}
                <StarOutlined style={{color: '#2563eb'}} />
                <span className="text-primary text-sm font-medium">
                  匹配度 92%
                </span>
              </div>
              <button className="px-4 py-1.5 bg-primary text-white rounded !rounded-button whitespace-nowrap">
                立即申请
              </button>
            </div>
          </div>

          <div className="job-card bg-white rounded-lg shadow-sm p-4">
            <div className="flex justify-between items-start mb-3">
              <h3 className="text-lg font-medium text-gray-900">
                高级前端工程师
              </h3>
              <div className="text-primary font-medium">25k-35k</div>
            </div>
            <div className="flex items-center mb-3">
              <div className="w-10 h-10 bg-gray-100 rounded flex items-center justify-center mr-2">
                <div className="text-gray-500 font-['Pacifico']">logo</div>
              </div>
              <div>
                <div className="text-gray-800">字节跳动</div>
                <div className="text-xs text-gray-500">
                  互联网 | 1000-9999人
                </div>
              </div>
            </div>
            <div className="flex items-center text-sm text-gray-600 mb-3 gap-3">
              <div className="flex items-center">
                {/* <div className="w-4 h-4 flex items-center justify-center mr-1 text-gray-400">
                  <i className="ri-map-pin-line"></i>
                </div> */}
                <EnvironmentOutlined />
                <span>上海</span>
              </div>
              <div className="flex items-center">
                {/* <div className="w-4 h-4 flex items-center justify-center mr-1 text-gray-400">
                  <i className="ri-time-line"></i>
                </div> */}
                <ClockCircleOutlined />
                <span>3-5年</span>
              </div>
              <div className="flex items-center">
                {/* <div className="w-4 h-4 flex items-center justify-center mr-1 text-gray-400">
                  <i className="ri-book-open-line"></i>
                </div> */}
                <ReadOutlined />
                <span>本科</span>
              </div>
            </div>
            <div className="flex justify-between items-center">
              <div className="flex items-center">
                {/* <div className="w-4 h-4 flex items-center justify-center mr-1 text-primary">
                  <i className="ri-star-fill"></i>
                </div> */}
                <StarOutlined style={{color: '#2563eb'}} />
                <span className="text-primary text-sm font-medium">
                  匹配度 92%
                </span>
              </div>
              <button className="px-4 py-1.5 bg-primary text-white rounded !rounded-button whitespace-nowrap">
                立即申请
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};
